<!DOCTYPE html>
<html>
  <head>
    <!--Import Google Icon Font-->
    <link
      href="https://fonts.googleapis.com/icon?family=Material+Icons"
      rel="stylesheet"
    />
    <!--Import materialize.css-->
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css"
    />

    <!--Let browser know website is optimized for mobile-->
    <meta
      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, shrink-to-fit=no"
      name="viewport"
    />
    <!--icon-->
    <link rel="icon" type="image/png" href="../assets/img/icon.png" />
    <meta name="title" content="History - Health Ledger" />
    <style>
        .fixed-nav {
        overflow: hidden;
        position: fixed;
        top: 0;
        width: 100%;
        z-index: 1;
        }

        .padding-top-form {
        padding-top: 5rem;
        }
    </style>
    <title>History</title>
  </head>

  <body>
    <!-- Navbar start  -->
    <nav class="fixed-nav">
      <div class="nav-wrapper">
        <a href="#" class="brand-logo center">History of Donations</a>
          <ul id="nav-mobile" class="right hide-on-med-and-down">
             <li><a href="reciever.html">Be a Reciever</a></li>
          </ul>
          <ul id="nav-mobile" class="right hide-on-med-and-down">
            <li><a href="donor.html">Donor</a></li>
          </ul>
          <ul id="nav-mobile" class="right hide-on-med-and-down">
            <li><a href="hospital.html">Hospital</a></li>
          </ul>
          <ul id="nav-mobile" class="right hide-on-med-and-down">
            <li><a href="login.html">Login</a></li>
          </ul>
          <ul id="nav-mobile" class="right hide-on-med-and-down">
            <li><a href="register.html">Register</a></li>
          </ul>
          <ul id="nav-mobile" class="right hide-on-med-and-down">
              <li><a href="../index.html">Home</a></li>
          </ul>
      </div>
    </nav>
    <!-- Navbar end  -->
    <!-- Form start  -->
    <div class="row DonorForm center padding-top-form">
      <div class="col s12 m12">
        <div class="card-panel white">
          <span class="grey-text">
            <h4>All organ transfers</h4>
            <div class="row">
              <table class="striped">
                <thead>
                  <tr>
                    <th>Transaction ID</th>
                    <th>Donor detail</th>
                    <th>Receiver detail</th>
                    <th>Incentive given</th>
                    <th>Timestamp</th>
                  </tr>
                </thead>

                <tbody></tbody>
              </table>
            </div>
          </span>
        </div>
      </div>
    </div>

    <!-- Form end  -->

    <!--JavaScript at end of body for optimized loading-->
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
    <script>
      var transactionUrl = "http://localhost:3000/api/api.OrganTransfer";
      $.getJSON(transactionUrl, function(data) {
        console.log(data);
        $.each(data, function(key, val) {
          // console.log($("#hospitalList").append("<li id='"+key+"'>"+val.name +"</li>"))
          $("tbody").append(
            "<tr><td>" +
              val.transactionId +
              "</td><td>" +
              val.from +
              "</td><td>" +
              val.to +
              "</td><td>" +
              val.rewardPonits +
              "</td><td>" +
              val.timestamp +
              "</td></tr>"
          );
        });
        // console.log(hospitalList);
      });
    </script>
  </body>
</html>
